<div layout="column" ng-cloak class="md-padding">
  <p style="margin-bottom: 10px;">
    Custom component implementations using Material elements often want to apply theme colors
    to their custom components. Consider the custom <code>&lt;user-card&gt;</code> component below
    where the <code>md-colors</code> attribute is used to color the background and text colors
    using either the current or specified theme palette colors.
  </p>
  <!-- Example 1 -->
  <h4 class="card-title"> <code>&lt;user-card&gt;</code> without md-color features</h4>
  <regular-card name="User name" md-theme="default"></regular-card>
  <!-- Example 2 -->
  <h4 class="card-title"> <code>&lt;user-card&gt;</code> coloring using the 'default' theme</h4>
  <user-card name="User name"></user-card>
  <!-- Example 3 -->
  <h4 class="card-title"> <code>&lt;user-card&gt;</code> coloring using the 'forest' theme</h4>
  <user-card name="User name" theme="forest"></user-card>
  <!-- Footnote -->
  <p class="footnote">
    Note: The <code>md-colors</code> directive allows pre-defined theme colors to be applied
    as CSS style properties. <code>md-colors</code> uses the palettes defined in the
    <a href="https://material.io/archive/guidelines/style/color.html#color-color-palette">
      Material Design Colors</a> and the themes defined using <code>$mdThemingProvider</code>.
    This directive is an extension of the <code>$mdTheming</code> features.
  </p>
</div>
